<template>
	<section>
		<el-row>
			<!--工具条1-->
			<!--如果有更多工具条,放开此注释
			<el-col :span="24" class="toolbar"  style="pediting-bottom: 0px;">
				<el-col :span="4">
				</el-col>
			</el-col>
			-->

			<!--新增界面 Ad pub_ad-->
			<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editForm">

				<el-form-item label="广告位置" prop="positionId">
					<el-tag>{{position.name}}</el-tag>
				</el-form-item>
				<el-form-item label="广告名称" prop="name" style="width: 50%;">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="广告内容" prop="content">
          <el-input v-model="editForm.content" auto-complete="off" type="textarea"
                    autosize placeholder="请输入内容" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="广告主图" prop="imageUrl">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="editForm.imageUrl" :deptid="userInfo.deptid" :branch-id="userInfo.branchId" :remark="editForm.name">
            <span slot="title">修改广告主图</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="广告副图" prop="extraImage">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="editForm.extraImage" :deptid="userInfo.deptid" :branch-id="userInfo.branchId" :remark="editForm.name">
            <span slot="title">修改广告副图</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="小图标" prop="smallImage">
          <single-shear-upload :img-width="400" :img-height="240" :show-title="true" v-model="editForm.smallImage" :deptid="userInfo.deptid" :branch-id="userInfo.branchId" :remark="editForm.name">
            <span slot="title">修改小图标</span>
          </single-shear-upload>
        </el-form-item>
        <el-form-item label="商品价格" prop="goodsPrice">
          <el-input-number v-model="editForm.goodsPrice" auto-complete="off" style="width: 50%;"
                           placeholder="请输入数字" :controls="false" :min="0"></el-input-number>
        </el-form-item>
				<el-form-item label="广告链接" prop="link" style="width: 50%;">
					<el-input v-model="editForm.link" auto-complete="off"></el-input>
				</el-form-item>

        <el-form-item label="广告备注" prop="remark">
          <el-input autosize type="textarea" v-model="editForm.remark" placeholder="广告备注" style="width: 50%;"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				</el-form-item>
				<el-form-item label="上线/下线" prop="enabled">
          <template>
            <el-radio-group v-model="editForm.enabled">
              <el-radio :label="'1'">上线</el-radio>
              <el-radio :label="'0'">下线</el-radio>
            </el-radio-group>
          </template>
				</el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="editForm.sortOrder" :min="0"></el-input-number>
        </el-form-item>
<!--        <el-form-item label="点击次数" prop="clickNum">
          <el-input-number v-model="editForm.clickNum" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="生成订单" prop="clickNum">
          <el-input-number v-model="editForm.saleNum" :min="0"></el-input-number>
        </el-form-item>-->
				<el-form-item>
          <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
          <el-button @click.native="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util';//全局公共库
	import { editAdvert } from '@/api/mdp/arc/ad/advert';
	//import VueEditor from './Index';
	//import RichEditor from '../editor/RichEditor';
	import { mapGetters } from 'vuex'; 
	//import CategoryTree from '../../pub/category/CategoryTree'; //树
  //import goodsList from './goodsList';//回显选择的商品
  //import { listGoods, delGoods, batchDelGoods, getGoodsCount, batchChange} from '@/api/mallm/goods/goods';

	export default {
		props:['position','advert','visible'],
		watch: {
	      'advert':function( ad ) {
					this.editForm = ad;
	      },
	      'visible':function(visible) {
	      	if(visible==true){

	      	}
	      },
    },

		data() {
			return {
			  filters: {
					key: '',
					locationId: '',
					shopId: ''
				},

			  listLoading: false, //查询中...
        options:{},//下拉选择框的所有静态数据
			  editLoading: false,
			  editFormRules: {
          name: [{
            required: true,
            message: '广告名称不能为空',
            trigger: 'blur'
          }],
          imageUrl:[{
            required:true,
            message:'广告图片不能为空',
            trigger:'blur'
          }],
          enabled:[{
            required: true,
            message: '请选择上线/下线情况',
            trigger: 'blur'
          }]
        },
			  //新增界面数据 pub_ad
			  editForm: {
          id:'',positionId:'',mediaType:'',name:'',link:'',endTime:'',enabled:'',startTime:'',imageUrl:'',locationId:'',content:'',shopId:'',shareLvl:'',adType:'',clickNum:'',showNum:'',overTime:'',saleNum:'',sortOrder:'',showPct:'',remark:'',
          extraImage:'',goodsPrice:'',smallImage:''
        }
			  /**begin 在下面加自定义属性,记得补上面的一个逗号**/

			  /**end 在上面加自定义属性**/
			}//end return
		},//end data
		methods: {
			// 取消按钮点击 父组件监听@cancel="editFormVisible=false" 监听
			handleCancel:function(){
				this.$emit('cancel');
			},
			//新增提交Ad pub_ad 父组件监听@submit="afterEditSubmit"
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						if (!this.editForm.imageUrl ) {
							this.$message({
								message: '请上传广告图片',
								type: 'warning'
							});
							return;
						}
						if (!this.editForm.endTime) {
							this.$message({
								message: '请填写时间',
								type: 'warning'
							});
							return;
						}
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let params = Object.assign({}, this.editForm);
							editAdvert(params).then((res) => {
								this.editLoading = false;
								var tips=res.data.tips;
								if(tips.isOk){
									this.$refs['editForm'].resetFields();
									this.$emit('submit');//  @submit="afterEditSubmit"
								}
								this.$message({ message: tips.msg, type: tips.isOk?'success':'error' });
							}).catch(() => {
								this.editLoading = false;
							});
						});
					}
				});
			},
			/**begin 在下面加自定义方法,记得补上面的一个逗号**/

			/**end 在上面加自定义方法**/

		},//end method
		components: {  
		},
		computed: {
		    ...mapGetters([
		      'roles','userInfo','myShops','myLocations'
		    ])
		},
		mounted() {

			this.editForm=Object.assign(this.editForm, this.advert);
			//this.getGoodss();
			//加载下拉列表 如有需要去掉注释
			/**
			let optionsParams={code:'all',fieldNames:['sex']};
			selectCacheOptions(optionsParams).then(res=>{
				this.options=res.data.data;
			});
			**/
			//给下拉列表初始化默认值
			//this.editForm.xxx=getDefaultValue(this.options.xxx,'1');

			/**在下面写其它函数***/

		}//end mounted
	}

</script>

<style scoped>

</style>
